<template>
  <div class="page-container">
    <div class="header">
      <CitySelect
        v-model="selectedCity"
        :cities="cities"
        @update:modelValue="handleCityChange"
      />
    </div>
    <div class="charts-container">
      <div class="chart-item">
        <TemperatureChart
          ref="temperatureChart"
          :data="temperatureData"
          :city="selectedCity"
        />
      </div>
      <div class="chart-item">
        <WeatherStatsChart
          ref="weatherStatsChart"
          :data="statsData"
          :city="selectedCity"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { weatherApi } from './api/weather'
import CitySelect from './components/common/CitySelect.vue'
import TemperatureChart from './components/charts/TemperatureChart.vue'
import WeatherStatsChart from './components/charts/WeatherStatsChart.vue'

export default {
  name: 'App',
  components: {
    CitySelect,
    TemperatureChart,
    WeatherStatsChart
  },
  data() {
    return {
      selectedCity: '成都',
      cities: ['成都', '北京'],
      temperatureData: [],
      statsData: []
    }
  },
  async mounted() {
    window.addEventListener('resize', this.handleResize)
    await this.fetchAllData()
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    async fetchAllData() {
      try {
        this.temperatureData = []
        this.statsData = []
        
        const [weatherData, statsData] = await Promise.all([
          weatherApi.getWeatherData(this.selectedCity),
          weatherApi.getWeatherStats(this.selectedCity)
        ])
        
        if (weatherData.code === 200) {
          this.temperatureData = weatherData.data
        }
        
        if (statsData.code === 200) {
          this.statsData = statsData.data
        }

        await this.$nextTick()
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },

    async handleCityChange(value) {
      await this.fetchAllData()
    },

    handleResize() {
      if (this.$refs.temperatureChart?.chart) {
        this.$refs.temperatureChart.chart.resize()
      }
      if (this.$refs.weatherStatsChart?.chart) {
        this.$refs.weatherStatsChart.chart.resize()
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  width: 100%;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.header {
  padding: 20px 0;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  margin-bottom: 20px;
  width: 100%;
}

.charts-container {
  flex: 1;
  width: 100%;
  display: flex;
  gap: 20px;
}

.chart-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1;
}

.city-select {
  text-align: center;
  margin: 0;
}

select {
  padding: 10px 32px;
  font-size: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.3s;
  min-width: 200px;
}

select:hover {
  border-color: #409eff;
}

select:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

#main {
  width: 100%;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .charts-container {
    flex-direction: column;
  }

  .chart-item {
    margin-bottom: 20px;
  }

  .city-select {
    margin-bottom: 15px;
  }

  select {
    padding: 6px 20px;
    font-size: 14px;
    min-width: 140px;
  }
}
</style>
